<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"/>
    <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <script>
        $(function () {
            /* 监听模态窗体变化 */
            $("#my_modal1").on("show.bs.modal", function () {
                alert("开始显示模态窗口");
            });
            $("#my_modal1").on("shown.bs.modal", function () {
                alert("显示模态窗口完毕");
            });
            $("#my_modal1").on("hide.bs.modal", function () {
                alert("开始隐藏模态窗口");
            });
            $("#my_modal1").on("hidden.bs.modal", function () {
                alert("隐藏模态窗口完毕");
            });


            $("[data-toggle='tooltip']").tooltip();
        });

    </script>
    <style>
        body {
            margin: 40px;
        }

        div.item img {
            width: 100%;
        }

        div#carousel-example-generic1 {
            width: 80%;
            margin: 0 auto;
        }

        div#carousel-example-generic2 {
            width: 80%;
            margin: 0 auto;
        }

        div#carousel-example-generic3 {
            width: 80%;
            margin: 0 auto;
        }

        div#carousel-example-generic4 {
            width: 80%;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<!-- 3.1 模态窗体 -->
<!-- 静态模态窗口 -->
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button data-dismiss="modal" class="close">
                <span aria-hidden="true">x</span>
                <span class="sr-only">close</span>
            </button>
            <h4 class="modal-title">提问</h4>
        </div>
        <div class="moal-body">
            <p>问题描述</p>
            <textarea class="form-control"></textarea>
        </div>
        <div class="modal-footer">
            <button data-dismiss="modal" class="btn btn-default">关闭</button>
            <button class="btn btn-primary">提交</button>
        </div>
    </div>
</div>
<br/>
<!-- 点击弹出(有动画效果) -->
<button class="btn btn-primary" data-toggle="modal" data-target="#my_modal1">点击提问</button>
<div class="modal fade" id="my_modal1" tabindex="-1" aria-labelledby="my_modal1_label1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button data-dismiss="modal" class="close">
                    <span aria-hidden="true">x</span>
                </button>
                <h4 class="modal-title">提问</h4>
            </div>
            <div class="modal-body">
                <p>问题描述</p>
                <textarea class="form-control"></textarea>
            </div>
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-default" onclick="function f() {

                }">关闭
                </button>
                <button data-dismiss="modal" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>
<!-- 点击弹出(无动画效果) -->
<button class="btn btn-primary" data-toggle="modal" data-target="#my_modal2">点击提问</button>
<div class="modal" id="my_modal2" tabindex="-1" aria-labelledby="my_modal1_label2">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button data-dismiss="modal" class="close">
                    <span aria-hidden="true">x</span>
                </button>
                <h4 class="modal-title">提问</h4>
            </div>
            <div class="modal-body">
                <p>问题描述</p>
                <textarea class="form-control"></textarea>
            </div>
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-default">关闭</button>
                <button data-dismiss="modal" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>
<!-- 点击空白处不会收起 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#my_modal3">点击提问</button>
<div class="modal fade" id="my_modal3" data-backdrop="static" tabindex="-1" aria-labelledby="my_modal1_label3">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button data-dismiss="modal" class="close">
                    <span aria-hidden="true">x</span>
                </button>
                <h4 class="modal-title">提问</h4>
            </div>
            <div class="modal-body">
                <p>问题描述</p>
                <textarea class="form-control"></textarea>
            </div>
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-default">关闭</button>
                <button data-dismiss="modal" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>
<hr/>


<!-- 可切换导航栏 -->
<ul id="my_tab" class="nav nav-tabs">
    <li class="active"><a href="#dota" data-toggle="tab">dota</a></li>
    <li><a href="#lol" data-toggle="tab">lol</a></li>
    <li class="dropdown">
        <a href="#" id="my_tab_drop1" class="dropdown-toggle" data-toggle="dropdown">其他游戏<b class="caret"></b></a>
        <ul class="dropdown-menu" aria-labelledby="my_tab_drop1">
            <li><a href="#storm" tabindex="-1" data-toggle="tab">风暴英雄</a></li>
            <li><a href="#h300" tabindex="-1" data-toggle="tab">300英雄</a></li>
        </ul>
    </li>
</ul>
<div id="my_tab_content" class="tab-content">
    <div class="tab-pane fade in active" id="dota">
        <p>《DotA》（Defense of the Ancients），可以译作守护古树、守护遗迹、远古遗迹守卫， 是由暴雪公司出品即时战略游戏《魔兽争霸3》的一款多人即时对战、自定义地图，可支持10个人同时连线游戏，是暴雪公司官方认可的魔兽争霸的RPG地图。</p>
    </div>
    <div class="tab-pane fade" id="lol">
        <p>《英雄联盟》（简称lol）是由美国Riot Games开发，中国大陆地区由腾讯游戏运营的网络游戏。</p>
    </div>
    <div class="tab-pane fade" id="storm">
        <p>
            《风暴英雄》 是由暴雪娱乐公司开发的一款运行在Windows和Mac OS上的在线多人竞技PC游戏。</p>
        <p> 游戏中的英雄角色主要来自于暴雪三大经典游戏系列：《魔兽世界》、《暗黑破坏神》和《星际争霸》。它是一款道具收费的游戏，与《星际争霸Ⅱ》基于同一引擎开发。
        </p>
    </div>
    <div class="tab-pane fade" id="h300">
        <p>《300英雄》是由上海跳跃网络科技有限公司自主研发，深圳中青宝互动网络股份有限公司运营的一款类DOTA网游。游戏以7v7组队对抗玩法为主，提供永恒战场和永恒竞技场两种经典模式任由玩家选择，并创新性地加入勇者斗恶龙、克隆战争等多种休闲娱乐玩法。
        </p>
    </div>
</div>
<hr/>


<!-- 2.3 提示工具 -->
<!-- 非bootstrap工具提示 -->
<button class="btn btn-default" title="提示信息">非bootstrap工具提示</button>
<!-- 上下左右侧提示 -->
<button style="margin-left: 100px" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="提示信息">上侧提示</button>
<button style="margin-right: 100px" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="提示信息">下侧提示</button>
<button class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="提示信息">左侧提示</button>
<button class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="提示信息">右侧提示</button>
<hr/>


<!-- 2.4 折叠 -->
<!-- 基本折叠 -->
<a class="btn btn-info" data-toggle="collapse" href="#dota1" aria-expanded="false" aria-controls="collapse_example">dota</a>
<button class="btn btn-info" data-toggle="collapse" data-target="#lol1" aria-expanded="false" aria-controls="collapse_example">lol</button>
<div class="collapse" id="dota1">
    <div class="well">
        《DotA》（Defense of the Ancients），可以译作守护古树、守护遗迹、远古遗迹守卫， 是由暴雪公司出品即时战略游戏《魔兽争霸3》的一款多人即时对战、自定义地图，可支持10个人同时连线游戏，是暴雪公司官方认可的魔兽争霸的RPG地图。
    </div>
</div>
<div class="collapse" id="lol1">
    <div class="well">
        《英雄联盟》（简称lol）是由美国Riot Games开发，中国大陆地区由腾讯游戏运营的网络游戏。
    </div>
</div>
<hr/>
<!-- 面板折叠 -->
<div class="panel-group" id="accordion" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading" id="heading1">
            <h4 class="panel-title">
                <a href="#collapse1" data-toggle="collapse" data-parent="#accordion" aria-expanded="true" aria-controls="collapse1">dota</a>
            </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse in" aria-labelledby="heading1">
            <div class="panel-body">
                《DotA》（Defense of the Ancients），可以译作守护古树、守护遗迹、远古遗迹守卫， 是由暴雪公司出品即时战略游戏《魔兽争霸3》的一款多人即时对战、自定义地图，可支持10个人同时连线游戏，是暴雪公司官方认可的魔兽争霸的RPG地图。
            </div>
        </div>
        <div id="collapse2" class="panel-collapse collapse" aria-labelledby="heading2">
            <div class="panel body">
                《英雄联盟》（简称lol）是由美国Riot Games开发，中国大陆地区由腾讯游戏运营的网络游戏。
            </div>
        </div>
        <div class="panel panel-primary">
            <div class="panel-heading" id="heading3">
                <h4 class="panel-title">
                    <a class="collapsed" href="#collapse3" data-toggle="collapse" data-parent="#accordion" aria-expanded="false" aria-controls="collapse3">风暴英雄</a>
                </h4>
            </div>
        </div>
        <div id="collapse3" class="panel-collapse collapse" aria-labelledby="heading3">
            <div class="panel-body">
                《风暴英雄》 是由暴雪娱乐公司开发的一款运行在Windows和Mac OS上的在线多人竞技PC游戏。
            </div>
        </div>
    </div>
</div>
<hr/>


<!-- 2.5 轮播 -->
<!-- 基本轮播 -->
<div id="carousel-example-generic1" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic1" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic1" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic1" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic1" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="http://how2j.cn/img/site/step/3491.png"/>
        </div>
        <div class="item">
            <img src="http://how2j.cn/img/site/step/3492.png"/>
        </div>
        <div class="item">
            <img src="http://how2j.cn/img/site/step/3493.png"/>
        </div>
        <div class="item">
            <img src="http://how2j.cn/img/site/step/3494.png"/>
        </div>
    </div>
</div>
<!-- 带标题轮播 -->
<div id="carousel-example-generic2" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic2" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic2" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic2" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic2" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="http://how2j.cn/img/site/step/3491.png"/>
            <div class="carousel-caption">lol1</div>
        </div>
        <div class="item">
            <img src="http://how2j.cn/img/site/step/3492.png"/>
            <div class="carousel-caption">lol2</div>
        </div>
        <div class="item">
            <img src="http://how2j.cn/img/site/step/3493.png"/>
            <div class="carousel-caption">lol3</div>
        </div>
        <div class="item">
            <img src="http://how2j.cn/img/site/step/3494.png"/>
            <div class="carousel-caption">lol4</div>
        </div>
    </div>
</div>
<!-- 设置轮播速度 -->
<div id="carousel-example-generic3" class="carousel slide" data-ride="carousel" data-interval="1100">
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic3" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic3" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic3" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic3" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="http://how2j.cn/img/site/step/3491.png"/>
        </div>
        <div class="item">
            <img src="http://how2j.cn/img/site/step/3492.png"/>
        </div>
        <div class="item">
            <img src="http://how2j.cn/img/site/step/3493.png"/>
        </div>
        <div class="item">
            <img src="http://how2j.cn/img/site/step/3494.png"/>
        </div>
    </div>
</div>
<!-- 控制前后的轮播 -->
<div id="carousel-example-generic4" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic4" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic4" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic4" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic4" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="http://how2j.cn/img/site/step/3491.png"/>
        </div>
        <div class="item">
            <img src="http://how2j.cn/img/site/step/3492.png"/>
        </div>
        <div class="item">
            <img src="http://how2j.cn/img/site/step/3493.png"/>
        </div>
        <div class="item">
            <img src="http://how2j.cn/img/site/step/3494.png"/>
        </div>
    </div>
    <!-- 控制器 -->
    <a class="left carousel-control" href="#carousel-example-generic4" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic4" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    </a>
</div>
</body>
</html>